<template>
    <div class="c-main">
        <div class="inp">
            <el-input v-model="keys" placeholder="请输入" />
        </div>

        <div id="html2canvas" class="mt-20 html2">
            <div class="key">{{ keys }}</div>
            <u-image width="300px" height="auto" :src="ok"></u-image>
        </div>
        <div class="btn">
            <el-button type="primary" @click="Byimage">生成图片</el-button>
        </div>
        <div class="toimg mt-20">
            <a href="http://html2canvas.hertzen.com/" target="_blank" rel="noopener noreferrer">
                html2canvas插件官网地址
            </a>
            <hr />

            <div class="totext">生成的图片：</div>
            <hr />

            <div v-show="img">
                <u-image width="300px" height="auto" :src="img"></u-image>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import html2canvas from 'html2canvas';
import { ref } from 'vue';
import ok from '@/assets/images/ok.png';

let keys = ref<string>('帮忙点下star,ok?');
let img = ref<string>('');

const Byimage = () => {
    html2canvas(document.querySelector('#html2canvas') as HTMLElement, {
        //允许图片跨域
        useCORS: true,
        // 启用日志记录以进行调试
        logging: true,
        // 背景颜色
        backgroundColor: 'transparent',
    }).then(canvas => {
        let url = canvas.toDataURL('image/png');
        img.value = url;
    });
};
</script>

<style lang="scss" scoped>
.c-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    .inp {
        width: 300px;
    }
    .html2 {
        width: 300px;

        .key {
            height: 40px;
            line-height: 40px;
        }
    }
    .toimg {
        width: 300px;
    }
}
</style>
